<script setup>
import {getStatic, getList as getComment} from "@/boot/comment.js";
import {getList as getRest} from "@/boot/rest.js";
import {getList as getCollection} from "@/boot/collection.js";
import {onMounted, ref,watch} from "vue";
import * as echarts from 'echarts'
import 'echarts-wordcloud'

const data = ref([])
const rest = ref([])
const options = ref([])
const selected1 = ref('')
const selected2 = ref('')
const comments1 = ref([])
const comments2 = ref([])
const collections = ref([])
const collected1 = ref(0)
const collected2 = ref(0)

onMounted(() => {
  getCollection({}).then(res => {
    collections.value = res.data.data
  })
  getStatic().then(res => {
    data.value = JSON.parse(res.data.data)
  }).then(() => {
    let chart1 = echarts.init(document.getElementById('chart1'))
    let option1 = {
      tooltip: {},
      legend: {
        data: ['数量']
      },
      xAxis: {
        data: ['评论数量']
      },
      yAxis: {},
      series: [{
        name: '数量',
        type: 'pie',
        data: [
          {value: comments1.value.length, name: '餐厅1'},
          {value: comments2.value.length, name: '餐厅2'}
        ]
      }]
    };
    // chart1.setOption(option1)

    let chart3 = echarts.init(document.getElementById('chart3'))
    chart3.setOption({
      series: [{
        type: 'wordCloud',
        shape: 'circle',
        keepAspect: false,
        left: 'center',
        top: 'center',
        width: '90%',
        height: '90%',
        right: null,
        bottom: null,
        sizeRange: [12, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        shrinkToFit: false,
        layoutAnimation: true,
        textStyle: {
          fontFamily: 'sans-serif',
          fontWeight: 'bold',
          color: function () {
            return 'rgb(' + [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160)
            ].join(',') + ')';
          }
        },
        emphasis: {
          focus: 'self',
          textStyle: {
            textShadowBlur: 10,
            textShadowColor: '#333'
          }
        },
        data: data.value.wordCloud.map(item => {
          return {
            name: item.item,
            value: item.count
          }
        })
      }]
    });
  })
  getRest({}).then(res => {
    rest.value = res.data.data
    options.value = rest.value.map(item => {
      return {
        name: item.name,
        id: item.id
      }
    })
  })
})
watch(()=>selected1.value,()=>{
  let item = rest.value.filter(item=>item.id === selected1.value)[0]
  comments1.value = JSON.parse(item.comment)
  collected1.value = collections.value.filter(item=>item.restId === selected1.value).length

  getComment({restId:selected1.value}).then(res=>{
    comments1.value = [...comments1.value,...res.data.data]
  })
  let dom = document.getElementById('chart1')
  console.log(dom)
  let chart1 = echarts.getInstanceByDom(dom)
  chart1.setOption({
    legend: {
      data: ['数量']
    },
    xAxis: {
      data: ['评论数量']
    },
    yAxis: {},
    series: [{
      name: '数量',
      type: 'pie',
      data: [
        {value: comments1.value.length, name: rest.value.filter(item=>item.id === selected1.value)[0]?.name},
        {value: comments2.value.length, name: rest.value.filter(item=>item.id === selected2.value)[0]?.name }
      ]
    }]
  })

  let chart2 = echarts.init(document.getElementById('chart2'))
  chart2.setOption({
    tooltip: {},
    legend: {
      data: ['数量']
    },
    xAxis: {
      data: ['评论数量']
    },
    yAxis: {},
    series: [{
      name: '数量',
      type: 'pie',
      data: [
        {value: collected1.value, name: rest.value.filter(item=>item.id === selected1.value)[0]?.name},
        {value: collected2.value, name: rest.value.filter(item=>item.id === selected2.value)[0]?.name }
      ]
    }]
  })
})

watch(()=>selected2.value,()=>{
  let item = rest.value.filter(item=>item.id === selected2.value)[0]
  comments2.value = JSON.parse(item?.comment)
  collected2.value = collections.value.filter(item=>item.restId === selected2.value).length

  getComment({restId:selected2.value}).then(res=>{
    comments2.value = [...comments2.value,...res.data.data]
  })
  let dom = document.getElementById('chart1')
  let chart1 = echarts.getInstanceByDom(dom)
  chart1.setOption({
    tooltip: {},
    legend: {
      data: ['数量']
    },
    xAxis: {
      data: ['评论数量']
    },
    yAxis: {},
    series: [{
      name: '数量',
      type: 'pie',
      data: [
        {value: comments1.value.length, name: rest.value.filter(item=>item.id === selected1.value)[0]?.name},
        {value: comments2.value.length, name: rest.value.filter(item=>item.id === selected2.value)[0]?.name }
      ]
    }]
  })

  let chart2 = echarts.init(document.getElementById('chart2'))
  chart2.setOption({
    tooltip: {},
    legend: {
      data: ['数量']
    },
    xAxis: {
      data: ['评论数量']
    },
    yAxis: {},
    series: [{
      name: '数量',
      type: 'pie',
      data: [
        {value: collected1.value, name: rest.value.filter(item=>item.id === selected1.value)[0]?.name},
        {value: collected2.value, name: rest.value.filter(item=>item.id === selected2.value)[0]?.name }
      ]
    }]
  })

})
</script>

<template>
  <div class="w-full h-full">
    <el-row :gutter="20">
      <el-col :span="12">
        <div>
          <span>
        选择餐厅1
      </span>
          <el-select v-model="selected1">

            <el-option v-for="item in options" :value="item.id" :label="item.name">
            </el-option>
          </el-select>
        </div>

      </el-col>
      <el-col :span="12">
        <div>
              <span>
        选择餐厅2
      </span>
          <el-select v-model="selected2">
            <el-option v-for="item in options" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </div>

      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            评论对比
          </template>
          <div id="chart1"  style="height: 200px" class="w-full"></div>

        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            收藏对比
          </template>
          <div id="chart2" style="height: 200px" class="w-full"></div>

        </el-card>
      </el-col>
    </el-row>
    <el-row class="mt-2">
      <el-col :span="24">
        <el-card>
          <template #header>
            词云
          </template>
          <div id="chart3" style="height: 200px" class="w-full"></div>

        </el-card>

      </el-col>
    </el-row>

  </div>
</template>

<style scoped>

</style>